<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='../../vue/vue.js'></script>
</head>

<body>
    <div id='root'>

    </div>
</body>

<template id="school">
    <div>
   <h2>名称：{{name}}</h2>
   <br>
   <h2>地址：{{address}}</h2>
   <Student></Student>
    </div>
</template>

<template id="student">
    <div>
        <h2>姓名：{{name}}</h2>
        <br>
        <h2>年龄：{{age}}</h2>
    </div>
</template>

<template id="hello">
    <div>
        <h2>{{msg}}</h2>
     </div>
</template>

<template id="app">
   <div>
    <School></School>
    <hello></hello>
   </div>
</template>
<script>
    const Student = {
        data() {
            return {
                name: '姜马陆',
                age: '22'
            }
        },
        template: `#student`
    }
    const School = {
        data() {
            return {
                name: '清华大学',
                address: '北京'
            }
        },
        template: `#school`,
        components: {
            Student
        }
    }
    const hello = {
        data() {
            return {
                msg: "欢迎来到清华"
            }
        },
        template: `#hello`
    }
    const app = {

        template: '#app',
        components: {
            School,
            hello
        }

    }


    new Vue({
            template: `<app></app>`,
            data: {},
            created() {},
            methods: {},
            computed: {},
            components: {
                app
            }
        }).$mount('#root')
        // <div>
        //     <hello></hello>
        //     <School></School>
        //     </div>
</script>

</html>